<template>
	<view>
		<view class="user_top">
			<view class="flex_jc_cent">
				<view class="img">
					<image class="img1" :src="userData.img" mode="aspectFill"></image>
					<image class="img2" src="/static/uu1.png" mode=""></image>
					<button :plain="true" class="btn_ads" open-type="chooseAvatar" @chooseavatar="chooseavatar"></button>
				</view>
			</view>
			<view class="ts" v-if="userData.vip != 0">{{ $userStatus(userData.vipType) }}：{{ userData.vipNumber }}</view>
		</view>

		<view class="uname flex_jc_sb" @click="$pageGo(`/pages/user/setname?name=${userData.name}`)">
			<view class="t1">昵称</view>
			<view class="flex">
				<view class="t2">{{ userData.name }}</view>
				<uni-icons type="right" size="16" color="#75613E"></uni-icons>
			</view>
		</view>

		<view class="uname_js" @click="$pageGo(`/pages/user/setintroduction?info=${userData.info}`)">
			<view class="uname_a flex_jc_sb">
				<view class="t1">自我介绍</view>
				<view class="flex">
					<uni-icons type="right" size="16" color="#75613E"></uni-icons>
				</view>
			</view>
			<view class="tss" :class="userData.info ? 'show' : ''">
				{{ userData.info ? userData.info : '嘘…这位稻友正在闭关修炼，简介栏暂时隐形了' }}
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { getUser, setUser } from '@/api/user.js';
import { toast, showLoad, hideLoad } from '@/utils/common';
const userData = ref({});
const getUserInfo = () => {
	getUser().then((res) => {
		if (res.code == 200) {
			userData.value = res.data.user;
			userData.value.img = userData.value.img === '' ? 'https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png' : userData.value.img;
		}
	});
};
onShow(() => {
	getUserInfo();
});

const chooseavatar = (e) => {
	showLoad('上传中...');
	uni.uploadFile({
		url: 'https://www.daolangtongge.com/read-book-api/common/upload', // 后台上传接口
		filePath: e.detail.avatarUrl, // 上传图片 url
		name: 'file',
		header: {
			'Content-Type': 'multipart/form-data',
			Authorization: uni.getStorageSync('App-Token')
		},
		success(res) {
			let img = JSON.parse(res.data).url;
			if (img) {
				hideLoad();
				setUser({ img }).then((res) => {
					if (res.code == 200) {
						toast('头像已修改');
						getUserInfo();
					}
				});
			}
		}
	});
};
</script>

<style lang="scss">
page {
	background: #f7f8f6;
}
.user_top {
	width: 100%;
	margin: 50rpx auto;
	.ts {
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		margin: 20rpx auto 34rpx;
	}
	.img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100rpx;
		position: relative;
		.btn_ads {
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			top: 0%;
			opacity: 0;
		}
		.img1 {
			width: 200rpx;
			height: 200rpx;
			border-radius: 100rpx;
		}
		.img2 {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			bottom: 0%;
			right: 0rpx;
		}
	}
}
.uname {
	width: 710rpx;
	height: 100rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 20rpx auto;
	padding: 0rpx 20rpx;
	box-sizing: border-box;
	.t1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #1b1b1b;
	}
	.t2 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
	}
}
.uname_js {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 20rpx auto;
	padding: 20rpx;
	box-sizing: border-box;
	.uname_a {
		height: 80rpx;
		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #1b1b1b;
		}
		.t2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #75613e;
		}
	}
	.tss {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #d9d9d9;
	}
	.show {
		color: #1b1b1b;
	}
}
</style>